<template>
    <div class="content">
        <el-table :data="DingList" border style="width: 100%">
            <el-table-column fixed type="index" width="50" align="center"></el-table-column>
            <el-table-column
                prop="order_number"
                label="订单编号"
                width="720"
            ></el-table-column>
            <el-table-column prop="order_price" label="订单价格" width="110" align="center"></el-table-column>
            <el-table-column label="是否付款" width="210" align="center">
                <span class="ys">已付款</span>
            </el-table-column>
            <el-table-column prop="is_send" label="是否发货" width="90" align="center"></el-table-column>
            <el-table-column prop="create_time" label="下单时间" width="160" align="center">
                <template  slot-scope="scope">
                    {{scope.row.create_time | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="220">
                <template>
                    <el-button type="primary" size="small"  @click="dialogFormVisible2 = true">修改地址</el-button>
                    <el-button type="success" size="small"  @click="dialogFormVisible1 = true">查看物流</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.currentPage"
            :page-sizes="[2, 10, 50, 100]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 对话框弹层 -->
        <el-dialog title="物流信息" :visible.sync="dialogFormVisible1" width="50%">
            <div class="block">
                <el-timeline :reverse="reverse">
                    <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp">
                    {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
        <!-- 修改地址对话框弹层 -->
        <el-dialog title="修改地址信息" :visible.sync="dialogFormVisible2" width="600px">
            地址：
            <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange">
            </el-cascader>
            <div class="demo-input-suffix">
                详细地址：
                <el-input
                    prefix-icon="el-icon-location-information"
                    v-model="input2">
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
				</div>
        </el-dialog>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name:"TableDing",
    props:["list","addFlag"],
    data() {
        return {
            input2: '',
            options: regionData,
            selectedOptions: [],
            value: false,
            currentPage: 1,
            total:0,
            params:{
				pagenum:1,
				pagesize:2
			},
            DingList:[],
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            reverse: false,
            activities: [
            {
                content: '已签收，感谢使用顺丰期待再次为您服务',
                timestamp: '2018-05-10 09:39:00'
            }, 
            {
                content: '北京市北京海淀青新小区营业点派件员顺丰速运95338正在为您派件',
                timestamp: '2018-05-09 12:25:03'
            }, 
            {
                content: '快件到达[北京海淀育新小区营业点]',
                timestamp: '2018-05-10 07:32:00'
            }, 
            {
                content: '快件在[北京顺义集散中心]已装车.准备发往[北京海淀育新小区营业点]',
                timestamp: '2018-05-10 02:03:00'
            }, 
            {
                content: '快件到达[北京顺义集散中心',
                timestamp: '2018-05-09 23:05:00'
            }, 
            {
                content: '快件在[北京宝胜营业点已装车.准备发往[北京顺义集散中心]',
                timestamp: '2018-05-09 21:21:00'
            }, 
            {
                content: '顺丰速运已收取快件',
                timestamp: '2018-05-09 13:07:00'
            }, 
            {
                content: '卖家发货',
                timestamp: '2018-05-09 12:25:03'
            }, {
                content: '您的订单将由HLA (北京海淀区清河中街街)门店安排发货。',
                timestamp: '2018-05-09 12:22:24'
            }, {
                content: '商品已经下单',
                timestamp: '2018-05-08 21:36:04'
            }],
            time:""
        };
    },
    watch:{
		addFlag:{
			handler(val){
				console.log(val)
				if(val){
					this.getTableDing()
				}
			}
		}
	}, 
    methods: {
        init(){
			// 数据初始化
			this.getTableDing();
		},
        handleChange (value) {
            console.log(value)
        },
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            this.params.pagesize = val;
            // console.log(`每页 ${val} 条`);
            this.getTableDing()
        },
        handleCurrentChange(val) {
            this.params.pagenum = val;
            // console.log(`当前页: ${val}`);
            this.getTableDing()
        },
        async getTableDing(){
			//发送Ajax请求
            let res = await this.$http.DingList(this.params)
			this.DingList = res.data.data.goods;
			// console.log(res)
            this.total = res.data.data.total; 
            // this.tableDate = res.data.data.users;
		}
    },
	
    created(){
        this.$nextTick(() => {
			this.init();
		})
    }     
}
</script>

<style lang="scss" scoped>
.content{
    width: calc(100vw - 260px);
    padding: 20px 20px;
    box-sizing: border-box;
    margin-top: 20px;
    // background: #eeeded;
    .el-form-item{
        display: flex;
        line-height: 40px;
        margin-bottom: 10px !important;
        font-size: 20px;
        label{
            font-size: 16px;
        }
        p{
            font-size: 16px;
        }
    }
    .btn{
        margin-top: 20px;
        padding: 0 0 !important;
        margin-left: 0 !important;
    }
    .el-table-column{
        display: flex;
        overflow: hidden;
    }
}
.block{
    margin-top: 30px;
}
.ys{
	background-color: #f0f9eb;
    border-color: #e1f3d8;
	color: #67c23a;
    height: 28px;
    line-height: 26px;
    padding: 5px 15px;
}
.el-input{
    width: 60%;
}
.demo-input-suffix{
    margin-top: 10px;
}

</style>